/**
 * Created by Administrator on 2017/3/21.
 */
import React, {Component, Fragment} from 'react';
import {
  Form,
  Button,
  Badge,
  Radio,
  Tooltip,
  DatePicker,
  Descriptions,
  Tag,
  Icon,
  Switch,
  message,
  Modal,
  Drawer,Carousel
} from 'antd';
import {connect} from 'dva';
import forEach from 'lodash/forEach';
import request from '@/utils/request';
import {
  getTimeDistance,
  renderValveOpen,
  download,
  formateObjToParamStr,
  renderSignalIntensity,
  afterCloseModal
} from '@/utils/utils';
import moment from 'moment';
import ReactEcharts from 'echarts-for-react';
import ReactDataGrid from 'react-data-grid';
import find from 'lodash/find';
import config from '../../config/config';
import Meter24Detail from './Meter24Detail';
import Detail from '@/pages/Owner/Detail';
import EditUnusualSpecial from './EditUnusualSpecial'
import BuildModalTitle from '@/components/BuildModalTitle';
import ZImg from 'react-zmage';
import AddOrEditMeterImage from "./addOrEditMeterImage";

const {confirm} = Modal;
const ButtonGroup = Button.Group;

class AddPoliciesForm extends Component {
  constructor(props) {
    super(props);
    this.permissions = JSON.parse(sessionStorage.getItem('permissions'));
    this.state = {
      detail: {},
      ownerDetail: {},
      editRecord: {},
      totalVal: 0,
      showType: 1,
      historyData: [],
      valve_logs: [],
      showCustom: false,
      openValveLoading: false,
      closeValveLoading: false,
      rangePickerValue: [moment(new Date().getFullYear() + '-' + (parseInt(new Date().getMonth()) + 1) + '-' + '01', 'YYYY-MM-DD'), moment(new Date(), 'YYYY-MM-DD')],
    };
  }

  componentDidMount() {
    // console.log('this', this.props.editRecord);
    const that = this;
    that.fetchDetail();
    that.fetch();
  }

  getOwner = () => {
    const that = this;
    request(`/accounts`, {
      method: 'GET',
      params: {
        meter_number: this.state.detail.number,
        communication_type: this.state.detail.communication_type
      },
    }).then((response) => {
      if (response.status === 200) {
        if (response.data.data.length > 0) {
          that.setState({
            ownerDetail: response.data.data[0],
            editRecord: response.data.data[0],
          });
        }
      }


    });
  };
  fetchDetail = () => {
    const that = this;
    request(`/meters/${this.props.id}`, {
      method: 'GET',
      params: {},
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          detail: response.data.data,
        }, function () {
          that.fetchSwitch_valve_logs();
          if (find(this.permissions, {name: 'owner_information'})) {
            that.getOwner();
          }
        });
      }


    });
  };
  fetchSwitch_valve_logs = () => {
    const that = this;
    request(`/switch_valve_logs`, {
      method: 'GET',
      params: {
        order_direction: 'desc',
        meter_number: this.state.detail.number,
        start_date: '2020-06-11',
        end_date: moment(new Date()).format('YYYY-MM-DD'),
      },
    }).then((response) => {
      if (response.status === 200) {
        that.setState({
          valve_logs: response.data.data,
        });
      }


    });
  };
  onChangeShowType = e => {
    this.setState({
      showType: e.target.value,
    });
  };

  isActive(type) {
    const {rangePickerValue} = this.state;
    const value = getTimeDistance(type);
    if (!rangePickerValue[0] || !rangePickerValue[1]) {
      return false;
    }
    if (rangePickerValue[0].isSame(value[0], 'day') && rangePickerValue[1].isSame(value[1], 'day')) {
      return true;
    }
  }

  selectDate = (type) => {
    const that = this;
    this.setState({
      rangePickerValue: getTimeDistance(type),
    }, function () {
      that.fetch();
    });
  };
  fetch = (cb) => {
    const that = this;
    request(`/meter_historical_data`, {
      method: 'GET',
      params: {
        meter_id: this.props.id,
        start_date: that.state.rangePickerValue[0].format('YYYY-MM-DD'),
        end_date: that.state.rangePickerValue[1].format('YYYY-MM-DD'),
      },
    }).then((response) => {
      console.log(response);
      if (response.status === 200) {
        this.setState({
          historyData: response.data.data,
          totalVal: response.data.total_consumption,
        });
      }

    });
  };
  changeFocus = (focus) => {
    const that = this;
    request(`/meters/${this.props.id}/focus`, {
      method: 'PUT',
      data: {
        focus: this.state.detail.focus === 1 ? -1 : 1,
      },
    }).then((response) => {
      if (response.status === 200) {
        that.fetchDetail();
      }
    });
  };
  handleExport = () => {
    const payload = {
      meter_id: this.props.id,
      start_date: this.state.rangePickerValue[0].format('YYYY-MM-DD'),
      end_date: this.state.rangePickerValue[1].format('YYYY-MM-DD'),
    };
    download(`${config.prefix}/meter_data_files?Authorization=Bearer ${sessionStorage.getItem('token')}&${formateObjToParamStr(payload)}`);
  };
  getOption = () => {
    const data = this.state.historyData;
    let Date = [];
    let Data = [];
    let diffData = [];
    let errDataIndex = [];
    let warmDataIndex = [];
    let difference_value = 0;
    forEach(data, (value, index) => {
      Date.push(value.date);
      Data.push(value.value);
      if (value.status !== 1) {
        errDataIndex.push(index);
      }
      diffData.push(value.consumption);
    });

    let option = {
      background: 'rgba(0,0,0,1)',
      color: ['#3398DB', '#fe5810'],
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: ['水表读数', '用水量'],
      },
      xAxis: [
        {
          type: 'category',
          data: Date,
          axisPointer: {
            type: 'shadow',
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: '水表读数(柱状图)',
          axisLabel: {
            formatter: '{value}(m3)',
          },
        },
        {
          type: 'value',
          name: '用水量(折线图)',
          axisLabel: {
            formatter: '{value}(m3)',
          },
          splitLine: {
            show: false,
          },
        },
      ],
      grid: {
        top: '12%',
        left: '2%',
        right: '2%',
        bottom: '4%',
        containLabel: true,
      },
      dataZoom: [
        {
          type: 'slider',
          show: false,
          xAxisIndex: [0],
        },
        {
          type: 'inside',
          xAxisIndex: [0],
        },
      ],
      series: [
        {
          name: '水表读数',
          type: 'bar',
          data: Data,
          itemStyle: {
            normal: {
              color: function (value) {
                if (errDataIndex.indexOf(value.dataIndex) >= 0) {
                  return '#c23531';
                } else {
                  return '#3398DB';
                }
              },
            },
          },
        },
        {
          name: '用水量',
          type: 'line',
          yAxisIndex: 1,
          symbolSize: 8,
          data: diffData,
          smooth: true,
          itemStyle: {
            normal: {
              color: '#fe5810',
            },
          },
          markLine: {
            silent: false,
            lineStyle: {
              color: '#3cde00',
              type: 'dashed',
            },
            label: {
              formatter: '{b} {c}',
              position: 'middle',
              color: '#fff',
              fontsize: 18,
              backgroundColor: '#00c10b',
              padding: [6, 4, 4],
            },
            data: [{
              name: '日用水平均值',
              type: 'average',
            }],
          },
        },
      ],
    };
    return option;
  };
  handleRangePickerChange = (datePickerValue, type) => {
    const that = this;
    if (type === 'start') {
      this.setState({
        rangePickerValue: [datePickerValue, this.state.rangePickerValue[1]],
      }, function () {
        that.fetch();
      });
    } else {
      this.setState({
        rangePickerValue: [this.state.rangePickerValue[0], datePickerValue],
      }, function () {
        that.fetch();
      });
    }
  };
  renderValueStatus = (val) => {
    let status = 'success';
    let explain = '';
    switch (val) {
      case -4:
        status = 'error';
        explain = '错报';
        break;
      case -3:
        status = 'error';
        explain = '抄表失败';
        break;
      case -2:
        status = 'warning';
        explain = '漏报';
        break;
      case -1:
        status = 'warning';
        explain = '未上报';
        break;
      default:
        status = 'success';
        explain = '正常';
    }
    return (
      <p>
        <Badge status={status}/>{explain}
      </p>
    );
  };
  renderBatteryStatus = (value) => {
    let status = 'success';
    let explain = '';
    switch (value) {
      case -1:
        status = 'warning';
        explain = '欠压';
        break;
      case 1:
        status = 'warning';
        explain = '正常';
        break;
      case 2:
        status = 'warning';
        explain = '未上报';
        break;
      default:
        status = 'success';
        explain = '正常';
    }
    return <span>{explain}</span>;
  };
  ChangeValve = (value) => {
    if (value === 1) {
      this.setState({
        openValveLoading: true,
      });
    } else {
      this.setState({
        closeValveLoading: true,
      });
    }
    const that = this;
    request(`/meter_valve_switch`, {
      method: 'POST',
      data: {
        meter_ids: [this.state.detail.number],
        valve_status: value,
      },
    }).then((response) => {
      if (response.status === 200) {
        message.success(`${value === 1 ? '开阀' : '关阀'}指令下发成功`);
        that.fetchSwitch_valve_logs();
        setTimeout(function () {
          that.setState({
            openValveLoading: false,
            closeValveLoading: false,
          });
        }, 2000);
      }
    });
  };
  handleEditUnusualSpecial = (params) => {
    const that = this;
    const formValues = this.UnusualForm.props.form.getFieldsValue();
    request(`/meters/${this.state.detail.id}/consumption_abnormality_value`, {
      method: 'PUT',
      params: {
        consumption_abnormality_value: formValues.value,
        consumption_abnormality_enable: formValues.consumption_abnormality_enable,
      }
    }).then((response) => {
      if (response.status === 200) {
        message.success('修改水表报警水量成功');
        that.setState({
          UnusualModal: false,
          detail: {
            ...that.state.detail, consumption_abnormality_value: formValues.value,
            consumption_abnormality_enable: formValues.consumption_abnormality_enable
          }
        });

      }
    });
  }
  handleAddImage = () => {

    const formValues = this.AddImgForm.props.form.getFieldsValue();
    const state = this.AddImgForm.state;
    console.log('formValues', formValues);
    let formData = new FormData();
    if (state.fileList.length === 0) {
      message.error('请选择图片')
      return false
    }
    formData.append("company_id", formValues.company_id);
    state.fileList.forEach((file,index) => {
      if(file.status==='done'){
        formData.append(`preserved_files[${index}][key]`, file.uid);
      }else {
        formData.append('files[]', file);
      }
    })
    // state.fileList.forEach(file => {
    //   formData.append('files[]', file);
    // })
    const that = this;
    request(`/meters/${this.state.detail.id}/images`, {
      method: 'POST',
      data: formData
    }).then((response) => {
      if (response.status === 200) {
        message.success('编辑图片成功');
        that.fetchDetail()
        that.setState({
          imgModal:false
        })

      }
    });
  }

  render() {
    const defaultColumnProperties = {
      resizable: true,
    };
    const {detail, ownerDetail} = this.state;
    const columns = [
      {
        name: '日期',
        width: 100,
        key: 'date',
        formatter: (event) => {
          return <span onClick={() => {
            this.setState({
              date: event.value,
              meter_id: this.props.id,
              show24Detail: true,
            });
          }} title={'点击查看当天24小时用水数据'} style={{color: 'blue', cursor: 'pointer'}}>{event.value}</span>;
        },
      },
      {
        name: '状态',
        width: 80,
        key: 'status',
        formatter: (event) => {
          return this.renderValueStatus(event.value);
        },
      },
      {
        name: '用水量(m3)',
        width: 100,
        key: 'consumption',
      },
      {
        name: '水表读数(m3)',
        width: 120,
        key: 'value',
      },
      {
        name: detail.communication_type === 1 ? '水表读数(原始)' : '其它用水量(m3)',
        width: 120,
        key: detail.communication_type === 1 ? 'original_value' : 'other_value',
      },
      {
        name: '信号强度',
        width: 80,
        key: 'signal_intensity',
      },
      {
        name: 'SNR',
        width: 50,
        key: 'snr',
      },
    ].map(c => ({...defaultColumnProperties, ...c}));

    const valvecolumns = [
      {
        name: '序号',
        width: 50,
        key: '_index',
        formatter: (event) => {
          return <p className={'index'}>{event.value + 1}</p>;
        },
      },
      {
        name: '下发时间',
        width: 150,
        key: 'created_at',
      },
      {
        name: '下发指令',
        width: 100,
        key: 'valve_status',
        formatter: (event) => {
          return renderValveOpen(event.value);
        },
      },
      {
        name: '状态',
        width: 100,
        key: 'status',
        formatter: (event) => {
          let status = 'success';
          let explain = '';
          switch (event.value) {
            case -1:
              status = 'error';
              explain = '下发失败';
              break;
            case 1:
              status = 'success';
              explain = '下发成功';
              break;
            default:
              status = 'warm';
              explain = '未知';
          }
          return (
            <p>
              <Badge status={status}/>{explain}
            </p>
          );
        },
      },
      {
        name: '操作员',
        width: 100,
        key: 'operator_name',
      },
      {
        name: '厂商名称',
        width: 100,
        key: 'vendor_name',
      },
      {
        name: '返回结果',
        width: 150,
        key: 'result',
        formatter: (event) => {
          return <Tooltip title={JSON.stringify(event.value)}
                          placement={'topLeft'}>{JSON.stringify(event.value)}</Tooltip>;
        },
      },
    ].map(c => ({...defaultColumnProperties, ...c}));
    const reverceData = [...this.state.historyData].reverse();
    return (
      <div>
        <Descriptions title={<div>
          <span>水表基本信息</span>
          <Tooltip placement="topRight" title={`收藏后将会在'水表总览'中的'重点水表'中显示`}>
            <Icon onClick={this.changeFocus} style={{
              marginLeft: '7px',
              marginTop: '2px',
              fontSize: '18px',
              color: detail.focus === 1 ? '#fea700' : '',
              cursor: 'pointer',
            }} placement="topLeft" theme={detail.focus === 1 ? 'filled' : 'outlined'} type="star"/>
          </Tooltip>
          <Button onClick={() => {

            document.querySelector('.ant-drawer-content .ant-drawer-wrapper-body').scrollTop = 1000;
          }} size={'small'} style={{float: 'right'}} icon={'arrow-down'} type={'primary'}>滚动到底部</Button>
        </div>} bordered>
          <Descriptions.Item label="水表号" span={3}> <Tooltip
            title={detail.number}>{detail.number}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="安装地址" span={3}><Tooltip
            title={detail.address}>{detail.address}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="水表照片" span={2}>{
            (detail.images && detail.images.length) > 0 ? <span><Button size={'small'} type={'primary'} onClick={() => {
              this.setState({
                imgPreModal:true
              })
              // ZImg.browsing({src: detail.images[0].path})
            }
            }>点击查看</Button><span style={{color: 'blue', cursor: 'pointer'}} onClick={() => {
              this.setState({imgModal: true})
            }}> 点击编辑</span></span> : <span
            >暂无图片,<span style={{color: 'blue', cursor: 'pointer'}} onClick={() => {
              this.setState({imgModal: true})
            }}> 点击上传</span></span>
          }</Descriptions.Item>
          <Descriptions.Item label="协议名称" span={2}><Tooltip
            title={detail.protocol_name}>{detail.protocol_name}</Tooltip></Descriptions.Item>
          <Descriptions.Item label="厂商名称" span={2}>{detail.vendor_name}</Descriptions.Item>
          {
            detail.communication_type === 1 &&
            <Descriptions.Item label="阀门状态" span={2}>{renderValveOpen(detail.valve_status,detail.is_valve)}</Descriptions.Item>
          }
          <Descriptions.Item label="状态" span={2}><Fragment> <Icon
            type={detail.status === 1 ? 'check-circle' : 'close-circle'} theme="twoTone" className="table-icon"
            twoToneColor={detail.status === 1 ? '#52c41a' : '#eb2f96'}/>{detail.status === 1 ? '正常' : '停用'}
          </Fragment></Descriptions.Item>
          {
            detail.communication_type === 1 && <Descriptions.Item label="是否阀控" span={2}><Fragment> <Icon
              type={detail.is_valve === 1 ? 'check-circle' : 'close-circle'} theme="twoTone" className="table-icon"
              twoToneColor={detail.is_valve === 1 ? '#52c41a' : '#eb2f96'}/>{detail.is_valve === 1 ? '有阀控' : '无阀控'}
            </Fragment></Descriptions.Item>
          }
          <Descriptions.Item label="水表底数" span={2}><span
            style={{color: detail.initial_value ? 'red' : ''}}>{detail.initial_value}</span></Descriptions.Item>

          <Descriptions.Item label="安装日期" span={2}>{detail.install_date}</Descriptions.Item>
          <Descriptions.Item label="开始上报数据日期" span={2}>{detail.enabled_date}</Descriptions.Item>
          {
            detail.communication_type === 1 &&
            <Descriptions.Item label="信号强度"
                               span={2}>{renderSignalIntensity(detail.signal_intensity)}</Descriptions.Item>
          }
          {detail.snr !== '' &&
            <Descriptions.Item label="SNR" span={2}>{Number(detail.snr) === -1 ? '异常' : detail.snr}</Descriptions.Item>}
          {
            detail.communication_type === 1 &&
            <Descriptions.Item label="电池状态"
                               span={2}>{this.renderBatteryStatus(detail.battery_status)}</Descriptions.Item>
          }
          <Descriptions.Item label="口径" span={2}>{detail.caliber}</Descriptions.Item>
          <Descriptions.Item label="铅封号" span={2}>{detail.seal_number}</Descriptions.Item>

          <Descriptions.Item label="创建时间" span={2}><span
            title={detail.created_at}>{detail.created_at}</span></Descriptions.Item>

          <Descriptions.Item label="备注" span={3}><span title={detail.remark}>{detail.remark}</span></Descriptions.Item>
          {detail.disabled_date && <Descriptions.Item label="停用日期" span={3}>{detail.disabled_date}</Descriptions.Item>}
        </Descriptions>

        {
          find(this.permissions, {name: 'owner_information'}) &&
          <div>
            <h3 className={'ant-descriptions-title'} style={{marginTop: '18px'}}>水表开户信息

              {
                ownerDetail.name && <Button className={'btn-gold'} onClick={() => {
                  this.setState({
                    infoModal: true
                  })
                }} size={'small'} style={{float: 'right'}} icon={'account-book'} type={'primary'}>查看开户详情
                </Button>
              }
            </h3>
            {
              ownerDetail.name ?
                <Descriptions title={''} bordered>
                  <Descriptions.Item label="户主姓名" span={2}> <Tooltip
                    title={ownerDetail.name}>{ownerDetail.name}</Tooltip></Descriptions.Item>
                  <Descriptions.Item label="户主电话" span={2}><Tooltip
                    title={ownerDetail.phone}>{ownerDetail.mobile}</Tooltip></Descriptions.Item>
                  <Descriptions.Item label="当前余额" span={2}><p
                    className={Number(ownerDetail.balance) >= Number(ownerDetail.balance_alarm_amount) ?
                      'table-success table-status' :
                      Number(ownerDetail.balance) > 0 ? 'table-warm table-status' : 'table-error table-status'}>{ownerDetail.balance}</p>
                  </Descriptions.Item>
                  <Descriptions.Item label="用水性质"
                                     span={2}>{ownerDetail.price_nature && ownerDetail.price_nature.name}</Descriptions.Item>
                  <Descriptions.Item label="开户时间" span={2}><Tooltip
                    title={ownerDetail.created_at}>{ownerDetail.created_at}</Tooltip></Descriptions.Item>
                  <Descriptions.Item label="开户人" span={2}><Tooltip
                    title={ownerDetail.operator_name}>{ownerDetail.operator_name}</Tooltip></Descriptions.Item>
                </Descriptions>
                : <span style={{fontSize: '16px', color: 'red'}}>该水表暂未开户</span>
            }
          </div>

        }


        <h3 className={'ant-descriptions-title'} style={{marginTop: '18px'}}>
          {
            detail.communication_type === 1 ? '水表历史数据' : '水表历史抄表'
          }
          <Radio.Group onChange={this.onChangeShowType} style={{marginLeft: '10px'}} value={this.state.showType}>
            <Radio value={1}>柱状图</Radio>
            <Radio value={2}>表格</Radio>
          </Radio.Group>
        </h3>
        <div>
          <ButtonGroup>
            <Button onClick={() => this.selectDate('month')} type={this.isActive('month') ? 'primary' : ''}>本月</Button>
            <Button onClick={() => this.selectDate('year')} type={this.isActive('year') ? 'primary' : ''}>本年</Button>
          </ButtonGroup>

          <DatePicker
            value={this.state.rangePickerValue[0]}
            allowClear={false}
            format="YYYY-MM-DD"
            style={{width: 150}}
            placeholder={'开始日期'}
            onChange={(e) => this.handleRangePickerChange(e, 'start')}
          />
          <DatePicker
            allowClear={false}
            value={this.state.rangePickerValue[1]}
            format="YYYY-MM-DD"
            placeholder={'结束日期'}
            style={{width: 150}}
            onChange={(e) => this.handleRangePickerChange(e, 'end')}
          />
          <span
            style={{marginLeft: '10px', fontWeight: 'bold', fontSize: '18px'}}>用水量: {this.state.totalVal}(m3)</span>
        </div>
        <div style={{height: '320px', marginTop: '10px'}}>
          {
            this.state.showType === 1 ?
              <Fragment>
                <ReactEcharts
                  option={this.getOption()}
                  style={{height: '280px', width: '100%'}}
                  theme="my_theme"
                  //onChartReady={this.onChartReadyCallback}
                  //onEvents={EventsDict}
                />
                <p style={{marginBottom: '0'}}>注 : 蓝色柱状图表示当天水表读数上传正常,红色柱状图表示读数上传异常</p>
              </Fragment> : <ReactDataGrid
                columns={columns}
                rowGetter={i => reverceData[i]}
                rowsCount={reverceData.length}
                minHeight={300}
              />
          }
          {
            find(this.permissions, {name: 'meter_data_export'}) &&
            <Tooltip title={'导出前请先选择上方时间段'}>
              <Button block icon="export" type="primary"
                      style={{marginTop: '10px'}}
                      onClick={this.handleExport}
              >导出水表读数</Button>
            </Tooltip>
          }

        </div>

        {
          find(this.permissions, {name: 'meter_switch_valve'}) && detail.is_valve === 1 &&
          <Fragment>
            <h3 className={'ant-descriptions-title'} style={{marginTop: '30px'}}>水表操作</h3>
            <Button block icon="reload" type="primary" loading={this.state.openValveLoading} className={'btn-green'}
                    style={{marginBottom: '10px'}}
                    disabled={ownerDetail.name && Number(ownerDetail.balance) <= 0 && !find(this.permissions, {name: "force_open_valve"})}
                    onClick={() => {
                      const that = this;
                      confirm({
                        title: `确定要对${detail.number} 开阀吗?`,
                        content: '请谨慎操作！',
                        okText: '确定',
                        okType: 'danger',
                        cancelText: '取消',
                        centered: true,
                        maskClosable: true,
                        onOk() {
                          that.ChangeValve(1);
                        },
                        onCancel() {
                          console.log('Cancel');
                        },
                      });
                    }}
            >开阀</Button>
            <Button icon="poweroff" type="danger" loading={this.state.closeValveLoading} block
                    style={{marginBottom: '10px'}} onClick={() => {
              const that = this;
              confirm({
                title: `确定要对${detail.number} 关阀吗?`,
                content: '请谨慎操作！',
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                centered: true,
                maskClosable: true,
                onOk() {
                  that.ChangeValve(-1);
                },
                onCancel() {
                  console.log('Cancel');
                },
              });
            }}
            >
              关阀
            </Button>
            {ownerDetail.name && Number(ownerDetail.balance) <= 0 && !find(this.permissions, {name: "force_open_valve"}) &&
              <div style={{marginBottom: '10px', color: 'red'}}>用户余额不大于0时，不能人工下发开阀</div>}
          </Fragment>
        }
        {
          detail.communication_type === 1 &&
          <Fragment>
            <h3 className={'ant-descriptions-title'}>开关阀记录
            </h3>
            <ReactDataGrid
              columns={valvecolumns}
              rowGetter={i => {
                return {...this.state.valve_logs[i], _index: i};
              }}
              rowsCount={this.state.valve_logs.length}
              minHeight={212}
            />
          </Fragment>
        }
        {
          find(this.permissions, {name: 'meter_operation'}) &&
          <Descriptions title={<div style={{marginTop: '18px'}}>
            <span>报警设置</span>
          </div>} bordered>
            <Descriptions.Item label="报警操作" span={4}>
              <div style={{marginTop: '8px'}}>
                <Button type="primary" style={{marginRight: 10}} onClick={() => {
                  this.setState({
                    editRecord: detail,
                    UnusualModal: true
                  })
                }}>
                  水表用水量异常报警设置 </Button>
              </div>
            </Descriptions.Item>
          </Descriptions>
        }
        <Drawer
          title={`${this.state.date} 24小时用水数据详情`}
          placement="right"
          destroyOnClose
          onClose={() => {
            this.setState({
              show24Detail: false,
            });
          }}

          width={500}
          visible={this.state.show24Detail}
        >
          <Meter24Detail meter_id={this.props.id} date={this.state.date}></Meter24Detail>
        </Drawer>
        <Drawer
          title={`${this.state.editRecord && this.state.editRecord.name} 详情`}
          placement="right"
          destroyOnClose
          onClose={() => {
            this.setState({
              infoModal: false,
              // editRecord: {},
            });
          }}

          width={780}
          visible={this.state.infoModal}
        >
          <Detail meter_number={this.state.editRecord.meter_number}
                  id={this.state.editRecord.id}></Detail>
        </Drawer>
        <Modal
          title={<BuildModalTitle visible={this.state.UnusualModal} modalClass="UnusualModal" title="水表用水量异常报警设置"/>}
          className="UnusualModal"
          visible={this.state.UnusualModal}
          centered
          onCancel={() => {
            this.setState({UnusualModal: false})
          }}
          onOk={this.handleEditUnusualSpecial}
        >
          <EditUnusualSpecial
            editRecord={this.state.detail}
            wrappedComponentRef={(inst) => this.UnusualForm = inst}/>

        </Modal>
        <Modal
          title={<BuildModalTitle visible={this.state.imgModal} modalClass="imgModal"
                                  title={`${detail.number}上传图片`}/>}
          visible={this.state.imgModal}
          destroyOnClose
          centered
          onOk={this.handleAddImage}
          className="imgModal"
          onCancel={() => {
            this.setState({imgModal: false});
          }}

        >

          <AddOrEditMeterImage
            editRecord={this.state.detail}
            wrappedComponentRef={(inst) => this.AddImgForm = inst}/>
        </Modal>
        <Modal
          title={<BuildModalTitle visible={this.state.imgPreModal} modalClass="imgPreModal"
                                  title={`${detail.number}图片`}/>}
          visible={this.state.imgPreModal}
          destroyOnClose
          centered
          width={'90vw'}
          onOk={this.handleAddImage}
          className="imgPreModal"
          onCancel={() => {
            this.setState({imgPreModal: false});
          }}
          footer={null}

        >
          <Carousel >
            {
              detail.images && detail.images.map((item,index)=>{
                return <div key={index} style={{width:'80vw',height:'80vh',textAlign:'center'}}>
                  <img style={{height:'80vh',margin:'0 auto'}} src={item.path} alt=""/></div>
              })
            }
          </Carousel>
        </Modal>
      </div>
    );
  }
}

const AddPoliciesFormWrap = Form.create()(AddPoliciesForm);
export default connect()(AddPoliciesFormWrap);
